<template>
  <div>
    <div style="width: 100%; height: 10px" v-if="isHome"></div>
    <div class="myStyle myMain" v-if="isEcharts">
      <div class="stroke box_l" :style="{ width: !isHome ? '21.5%' : '25.5%' }">
        <StrokeDetial
          style="height: 36%"
          title="产量统计分析"
          :url="
            !isHome
              ? '/index/capacityDesign?title=产量统计分析详情&length=52'
              : '/special/parcel/capacityDesign'
          "
        >
          <div
            class="flex_center_direction"
            style="width: 100%; height: 94%; margin-top: 2%"
          >
            <div class="cnfx_box flex_center">
              <img src="@/assets/images/echarts/ri.png" alt="" class="" />
              <div class="content flex_center_direction">
                <div class="title">当日产量</div>
                <div class="number text_shadow">
                  <p
                    v-for="(item, index) in left2.dayBotleCount"
                    :key="index"
                    class="p-number"
                    :class="item == '.' ? 'noborder' : ''"
                  >
                    {{ item }}
                  </p>
                  <p
                    class="p-number noborder text_shadow"
                    style="color: #3bffe6; margin-left: 3px"
                  >
                    瓶
                  </p>
                </div>
              </div>
            </div>
            <div class="cnfx_box flex_center">
              <img src="@/assets/images/echarts/ri.png" alt="" class="" />
              <div class="content flex_center_direction">
                <div class="title">当日产量</div>
                <div class="number text_shadow">
                  <p
                    v-for="(item, index) in left2.dayBotleCountPing"
                    :key="index"
                    class="p-number"
                    :class="item == '.' ? 'noborder' : ''"
                  >
                    {{ item }}
                  </p>
                  <p
                    class="p-number noborder text_shadow"
                    style="color: #3bffe6; margin-left: 3px"
                  >
                    标准箱
                  </p>
                </div>
              </div>
            </div>
            <div class="cnfx_box flex_center">
              <img src="@/assets/images/echarts/yue.png" alt="" class="" />
              <div class="content flex_center_direction">
                <div class="title">当月累计产量</div>
                <div class="number text_shadow">
                  <!-- <p v-for="(item,index) in [8,4,0,0,7]" :key="index" class="p-number" :class="item=='.' ? 'noborder': '' ">{{item}}</p> -->
                  <p
                    v-for="(item, index) in left2.monthBoxCount"
                    :key="index"
                    class="p-number"
                    :class="item == '.' ? 'noborder' : ''"
                  >
                    {{ item }}
                  </p>
                  <p
                    class="p-number noborder text_shadow"
                    style="color: #3bffe6; margin-left: 3px"
                  >
                    标准箱
                  </p>
                </div>
              </div>
            </div>
            <div class="cnfx_box flex_center">
              <img src="@/assets/images/echarts/yue.png" alt="" class="" />
              <div class="content flex_center_direction">
                <div class="title">当月累计产量</div>
                <div class="number text_shadow">
                  <!-- <p v-for="(item,index) in [7,2,0,'.',1,2]" :key="index" class="p-number" :class="item=='.' ? 'noborder': '' ">{{item}}</p> -->
                  <p
                    v-for="(item, index) in left2.monthWaterUseCount"
                    :key="index"
                    class="p-number"
                    :class="item == '.' ? 'noborder' : ''"
                  >
                    {{ item }}
                  </p>
                  <p
                    class="p-number noborder text_shadow"
                    style="color: #3bffe6; margin-left: 3px"
                  >
                    吨
                  </p>
                </div>
              </div>
            </div>
          </div>
        </StrokeDetial>
        <StrokeDetial
          style="height: 35.9%"
          title="生产计划进度分析"
          :url="
            !isHome
              ? '/index/productionDesign?title=生产计划进度分析详情&length=52'
              : '/special/parcel/productionDesign'
          "
        >
          <!-- <Yibiaopan/> -->
          <div class="scjhjd_box flex_center_direction">
            <div class="yibiaopan">
              <img src="@/assets/images/echarts/biaopan.png" alt="" />
              <div class="yibiaopan_nummber text_shadow">
                {{ left3.monthRate }}%
              </div>
              <div class="type">&lt; 当月 &gt;</div>
            </div>
            <div class="water_box flex_between">
              <div class="water_box_item">
                <div class="water_box_item_bg flex_center">
                  <Water
                    :number="left3.monthRate"
                    backgroundColor="#093b76"
                    waterColor="rgba(255,92,238,0.5)"
                    textColor="rgba(255,92,238,1)"
                    width="106"
                    textSize="18"
                  />
                </div>
                <div class="type" style="color: rgba(255, 92, 238, 1)">
                  &lt; 当月计划 &gt;
                </div>
              </div>
              <div class="water_box_item">
                <div class="water_box_item_bg water_box_item_bg2 flex_center">
                  <Water
                    :number="left3.quarterRate"
                    backgroundColor="#093b76"
                    waterColor="rgba(255,255,78,0.5)"
                    textColor="rgba(255,255,78,1)"
                    width="106"
                    textSize="18"
                  />
                </div>
                <div class="type" style="color: rgba(255, 255, 78, 1)">
                  &lt; 当季计划 &gt;
                </div>
              </div>
              <!-- <div class="water_box_item">
                <div class="water_box_item_bg water_box_item_bg3 flex_center">
                  <Water :number="left3.allRate" backgroundColor="#093b76" waterColor="rgba(76,207,246,0.5)" textColor="rgba(76,207,246,1)" width="106" textSize="18" />
               
                </div>
                <div class="type" style="color: rgba(76, 207, 246, 1)">
                  &lt; 全部计划 &gt;
                </div>
              </div> -->
            </div>
          </div>
        </StrokeDetial>
        <StrokeDetial style="height: 31%" title="温湿度统计分析">
          <div class="flex_center wsd_box">
            <div
              class="item flex_between"
              v-for="(item, index) in arr"
              :key="index"
            >
              <div class="wsd_item_left">{{ item.name }}</div>
              <div class="wsd_item_right">
                <div class="wsd_item_right_item flex_between">
                  <!-- <div class="title">温度</div> -->
                  <div class="number">{{ item.wd }}℃</div>
                </div>
                <div class="wsd_item_right_item flex_between">
                  <!-- <div class="title">湿度</div> -->
                  <div class="number">{{ item.sd }}%</div>
                </div>
              </div>
            </div>
          </div>
        </StrokeDetial>
      </div>
      <div class="box_c" :style="{ width: !isHome ? '55.5%' : '48%' }">
        <div class="mapShow" @click="isMapCom = !isMapCom">切换</div>
        <!-- <div class="mapShow"><i class="el-icon-refresh"></i></div> -->
        <div class="day-box flex_center">
          <span> 安全生产天数</span>
          <div class="number-box">
            <p v-for="(it, ind) in safeDate" :key="ind" class="p-number">
              {{ it }}
            </p>
          </div>
          <span>天</span>
        </div>
        <div
          v-show="!isMapCom"
          class="flex_between"
          style="width: 100%; height: 68%; overflow: hidden; position: relative"
        >
          <img
            src="@/assets/images/gif.gif"
            alt=""
            class="mapGif"
            style="width: 100%; height: 100%"
          />
        </div>
        <div
          v-show="isMapCom"
          class="flex_between"
          style="width: 100%; height: 68%; overflow: hidden; position: relative"
        >
          <Map
            @openMap="
              isMap = true;
              mapInfo = $event;
            "
          />
          <div class="mapInfo" v-if="isMap">
            <div class="top">
              <nav>{{ mapInfo.title || "--" }}</nav>
              <div class="close" @click="isMap = false">X</div>
              <img src="../../assets/images/mapbor.png" alt="" class="border" />
            </div>
            <div class="content">
              <div>
                <p class="label" style="width: 60px">地址</p>
                <p class="value">
                  {{ mapInfo.address || "--" }}
                </p>
              </div>
              <div class="flex_center" style="position: relative; top: -5px">
                <div style="width: 33%">
                  <p class="label" style="width: 60px">资金</p>
                  <p class="value">
                    {{ mapInfo.fundNum || "--" }}
                  </p>
                </div>
                <div style="width: 33%">
                  <p class="label" style="width: 60px">人数</p>
                  <p class="value" style="width: 60px; text-align: center">
                    {{ mapInfo.peopleNum || "--" }}
                  </p>
                </div>
                <div style="width: 33%">
                  <p class="label" style="width: 60px">规模</p>
                  <p class="value" style="width: 60px; text-align: center">
                    {{ mapInfo.scale || "--" }}
                  </p>
                </div>
              </div>
              <div style="display: flex; position: relative; top: -10px">
                <div style="width: 33%">
                  <p class="label" style="width: 60px">负责人</p>
                  <p class="value">
                    {{ mapInfo.leader || "--" }}
                  </p>
                </div>
                <div style="width: 33%">
                  <p class="label" style="width: 80px">联系方式</p>
                  <p class="value">
                    {{ mapInfo.phone || "--" }}
                  </p>
                </div>
              </div>
              <div style="position: relative; top: -30px">
                <div style="width: 33%">
                  <p class="label" style="width: 60px">图片</p>
                  <img class="imgInfo" :src="mapInfo.pic" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="flex_between"
          style="width: 100%; height: 32%; position: relative; z-index: 999"
        >
          <StrokeDetial
            style="height: 100%; width: 100%"
            title="七率统计分析"
            class="stroke"
            :url="
              !isHome
                ? 'index/seven?title=七率分析详情'
                : '/special/parcel/sevenEcharts'
            "
          >
            <div class="flex_center">
              <ElementRadio
                :isButton="true"
                v-model="model"
                @change="radioChange"
                :options="[
                  {
                    value: 'lastMonth',
                    label: '上月',
                  },
                  { value: 'quarter', label: '当季' },
                ]"
              />
              <ElementSelect
                url="/system/dict/data/sevenList"
                ref="psNameSelect"
                :isClearable="false"
                :isAll="false"
                :formData="{ dictType: 'product_report_type' }"
                :isSelected="true"
                @select="selectList2"
                :settings="{
                  placeholder: '请选择',
                  isSelected: true,
                  isMultiple: false,
                  label: 'dictLabel',
                  value: 'dictValue',
                }"
              />
              <!-- <el-select v-model="value" placeholder="请选择" style="width:180px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select> -->
            </div>

            <div class="flex_center Echarts table">
              <el-table :data="left1" border>
                <el-table-column align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.type }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="瓶坯" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.type == '内控'">
                      <p>{{ scope.row.pp || 0 }}</p>
                    </div>
                    <div v-else>
                      <div
                        class="flex_center table_cell"
                        v-if="left1[1].pp < left1[0].pp"
                      >
                        <p class="text_shadow">{{ scope.row.pp || 0 }}</p>
                        <!-- <img src="@/assets/images/echarts/jiang1.png" alt="" /> -->
                      </div>
                      <div
                        class="flex_center table_cell"
                        v-else-if="left1[1].pp > left1[0].pp"
                      >
                        <p class="text_shadow_danger">
                          {{ scope.row.pp || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/sheng1.png" alt="" /> -->
                      </div>
                      <!-- <div class="flex_center table_cell" v-if="left1[1].pp == left1[0].pp">
                      <p class="text_shadow_yellow">{{ scope.row.pp || 0 }}</p>
                    </div> -->
                      <div class="flex_center table_cell" v-else>
                        <p class="text_shadow_yellow">
                          {{ scope.row.pp || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/jiang.png" alt="" /> -->
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="瓶盖" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.type == '内控'">
                      <p>{{ scope.row.pg || 0 }}</p>
                    </div>
                    <div v-else>
                      <div
                        class="flex_center table_cell"
                        v-if="left1[1].pg < left1[0].pg"
                      >
                        <p class="text_shadow">{{ scope.row.pg || 0 }}</p>
                        <!-- <img src="@/assets/images/echarts/jiang1.png" alt="" /> -->
                      </div>
                      <div
                        class="flex_center table_cell"
                        v-else-if="left1[1].pg > left1[0].pg"
                      >
                        <p class="text_shadow_danger">
                          {{ scope.row.pg || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/sheng1.png" alt="" /> -->
                      </div>
                      <!-- <div class="flex_center table_cell" v-if="left1[1].pg == left1[0].pg">
                      <p class="text_shadow_yellow">{{ scope.row.pg || 0 }}</p>
                    </div> -->
                      <div class="flex_center table_cell" v-else>
                        <p class="text_shadow_yellow">
                          {{ scope.row.pg || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/sheng1.png" alt="" /> -->
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="商标" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.type == '内控'">
                      <p>{{ scope.row.sb || 0 }}</p>
                    </div>
                    <div v-else>
                      <div
                        class="flex_center table_cell"
                        v-if="left1[1].sb < left1[0].sb"
                      >
                        <p class="text_shadow">{{ scope.row.sb || 0 }}</p>
                        <!-- <img src="@/assets/images/echarts/jiang1.png" alt="" /> -->
                      </div>
                      <div
                        class="flex_center table_cell"
                        v-else-if="left1[1].sb > left1[0].sb"
                      >
                        <p class="text_shadow_danger">
                          {{ scope.row.sb || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/sheng1.png" alt="" /> -->
                      </div>
                      <!-- <div class="flex_center table_cell" v-if="left1[1].sb == left1[0].sb">
                      <p class="text_shadow_yellow">{{ scope.row.sb || 0 }}</p>
                    </div> -->
                      <div class="flex_center table_cell" v-else>
                        <p class="text_shadow_yellow">
                          {{ scope.row.sb || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/jiang.png" alt="" /> -->
                      </div>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="吨耗电" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.type == '内控'">
                      <p>{{ scope.row.dhd || 0 }}</p>
                    </div>
                    <div v-else>
                      <div
                        class="flex_center table_cell"
                        v-if="left1[1].dhd < left1[0].dhd"
                      >
                        <p class="text_shadow">{{ scope.row.dhd || 0 }}</p>
                        <!-- <img src="@/assets/images/echarts/jiang1.png" alt="" /> -->
                      </div>
                      <div
                        class="flex_center table_cell"
                        v-else-if="left1[1].dhd > left1[0].dhd"
                      >
                        <p class="text_shadow_danger">
                          {{ scope.row.dhd || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/sheng1.png" alt="" /> -->
                      </div>
                      <!-- <div class="flex_center table_cell" v-if="left1[1].dhd == left1[0].dhd">
                      <p class="text_shadow_yellow">{{ scope.row.dhd || 0 }}</p>
                    </div> -->
                      <div class="flex_center table_cell" v-else>
                        <p class="text_shadow_yellow">
                          {{ scope.row.dhd || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/jiang.png" alt="" /> -->
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="水利用率" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.type == '内控'">
                      <p>{{ scope.row.sly || 0 }}</p>
                    </div>
                    <div v-else>
                      <div
                        class="flex_center table_cell"
                        v-if="left1[1].sly < left1[0].sly"
                      >
                        <p class="text_shadow">{{ scope.row.sly || 0 }}</p>
                        <!-- <img src="@/assets/images/echarts/jiang1.png" alt="" /> -->
                      </div>
                      <div
                        class="flex_center table_cell"
                        v-else-if="left1[1].sly > left1[0].sly"
                      >
                        <p class="text_shadow_danger">
                          {{ scope.row.sly || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/sheng1.png" alt="" /> -->
                      </div>
                      <!-- <div class="flex_center table_cell" v-if="left1[1].sly == left1[0].sly">
                      <p class="text_shadow_yellow">{{ scope.row.sly || 0 }}</p>
                    </div> -->
                      <div class="flex_center table_cell" v-else>
                        <p class="text_shadow_yellow">
                          {{ scope.row.sly || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/jiang.png" alt="" /> -->
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="人均产出" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.type == '内控'">
                      <p>{{ scope.row.qy || 0 }}</p>
                    </div>
                    <div v-else>
                      <div
                        class="flex_center table_cell"
                        v-if="left1[1].qy > left1[0].qy"
                      >
                        <p class="text_shadow">{{ scope.row.qy || 0 }}</p>
                        <!-- <img src="@/assets/images/echarts/jiang1.png" alt="" /> -->
                      </div>
                      <div
                        class="flex_center table_cell"
                        v-else-if="left1[1].qy < left1[0].qy"
                      >
                        <p class="text_shadow_danger">
                          {{ scope.row.qy || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/sheng1.png" alt="" /> -->
                      </div>
                      <!-- <div class="flex_center table_cell" v-if="left1[1].qy == left1[0].qy">
                      <p class="text_shadow_yellow">{{ scope.row.qy || 0 }}</p>
                    </div> -->
                      <div class="flex_center table_cell" v-else>
                        <p class="text_shadow_yellow">
                          {{ scope.row.qy || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/jiang.png" alt="" /> -->
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="单班产出" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.type == '内控'">
                      <p>{{ scope.row.db || 0 }}</p>
                    </div>
                    <div v-else>
                      <div
                        class="flex_center table_cell"
                        v-if="left1[1].db >= left1[0].db"
                      >
                        <p class="text_shadow">{{ scope.row.db || 0 }}</p>
                        <!-- <img src="@/assets/images/echarts/jiang1.png" alt="" /> -->
                      </div>
                      <div
                        class="flex_center table_cell"
                        v-else-if="left1[1].db < left1[0].db"
                      >
                        <p class="text_shadow_danger">
                          {{ scope.row.db || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/sheng1.png" alt="" /> -->
                      </div>
                      <!-- <div class="flex_center table_cell" v-if="left1[1].db == left1[0].db">
                      <p class="text_shadow_yellow">{{ scope.row.db || 0 }}</p>
                    </div> -->
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="维修费用" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.type == '内控'">
                      <p>{{ scope.row.wx || 0 }}</p>
                    </div>
                    <div v-else>
                      <div
                        class="flex_center table_cell"
                        v-if="left1[1].wx < left1[0].wx"
                      >
                        <p class="text_shadow">{{ scope.row.wx || 0 }}</p>
                        <!-- <img src="@/assets/images/echarts/jiang1.png" alt="" /> -->
                      </div>
                      <div
                        class="flex_center table_cell"
                        v-else-if="left1[1].wx > left1[0].wx"
                      >
                        <p class="text_shadow_danger">
                          {{ scope.row.wx || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/sheng1.png" alt="" /> -->
                      </div>
                      <!-- <div class="flex_center table_cell" v-if="left1[1].wx == left1[0].wx">
                      <p class="text_shadow_yellow">{{ scope.row.wx || 0 }}</p>
                    </div> -->
                      <div class="flex_center table_cell" v-else>
                        <p class="text_shadow_yellow">
                          {{ scope.row.wx || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/jiang.png" alt="" /> -->
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="客诉率" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.type == '内控'">
                      <p>{{ scope.row.ksl || 0 }}</p>
                    </div>
                    <div v-else>
                      <div
                        class="flex_center table_cell"
                        v-if="left1[1].ksl < left1[0].ksl"
                      >
                        <p class="text_shadow">{{ scope.row.ksl || 0 }}</p>
                        <!-- <img src="@/assets/images/echarts/jiang1.png" alt="" /> -->
                      </div>
                      <div
                        class="flex_center table_cell"
                        v-else-if="left1[1].ksl > left1[0].ksl"
                      >
                        <p class="text_shadow_danger">
                          {{ scope.row.ksl || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/sheng1.png" alt="" /> -->
                      </div>
                      <!-- <div class="flex_center table_cell" v-if="left1[1].ksl == left1[0].ksl">
                      <p class="text_shadow_yellow">{{ scope.row.ksl || 0 }}</p>
                    </div> -->
                      <div class="flex_center table_cell" v-else>
                        <p class="text_shadow_yellow">
                          {{ scope.row.ksl || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/jiang.png" alt="" /> -->
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="制程合格率" align="center" width="90px">
                  <template slot-scope="scope">
                    <div v-if="scope.row.type == '内控'">
                      <p>{{ scope.row.zcl || 0 }}</p>
                    </div>
                    <div v-else>
                      <div
                        class="flex_center table_cell"
                        v-if="left1[1].zcl > left1[0].zcl"
                      >
                        <p class="text_shadow">{{ scope.row.zcl || 0 }}</p>
                        <!-- <img src="@/assets/images/echarts/jiang1.png" alt="" /> -->
                      </div>
                      <div
                        class="flex_center table_cell"
                        v-else-if="left1[1].zcl < left1[0].zcl"
                      >
                        <p class="text_shadow_danger">
                          {{ scope.row.zcl || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/sheng1.png" alt="" /> -->
                      </div>
                      <!-- <div class="flex_center table_cell" v-if="left1[1].zcl == left1[0].zcl">
                      <p class="text_shadow_yellow">{{ scope.row.zcl || 0 }}</p>
                    </div> -->
                      <div class="flex_center table_cell" v-else>
                        <p class="text_shadow_yellow">
                          {{ scope.row.zcl || 0 }}
                        </p>
                        <!-- <img src="@/assets/images/echarts/jiang.png" alt="" /> -->
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </StrokeDetial>
          <!-- <StrokeDetial
          style="height: 100%; width: 49.5%"
          title="当月电力设备异常统计"
          class="stroke"
        >
          <div class="dyyctj_box flex_center">
            <div class="dyyctj_content">
              <img
                class="center_img"
                src="@/assets/images/echarts/dlsb.png"
                alt=""
              />
              <div class="dyyctj_item dyyctj_item_odd">
                <img
                  class=""
                  src="@/assets/images/echarts/yichang.png"
                  alt=""
                />
                <div class="dyyctj_item_content flex_between_direction">
                  <div class="title">异常次数</div>
                  <CountTo3 class="countTo" />
                </div>
              </div>
              <div class="dyyctj_item">
                <img
                  class=""
                  src="@/assets/images/echarts/wendu_orange.png"
                  alt=""
                />
                <div class="dyyctj_item_content flex_between_direction">
                  <div class="title">温度异常次数</div>
                  <CountTo3 class="countTo" color="rgba(255,153,0,0.4)" />
                </div>
              </div>
              <div class="dyyctj_item dyyctj_item_odd">
                <img
                  class="bottom"
                  src="@/assets/images/echarts/dianya.png"
                  alt=""
                />
                <div class="dyyctj_item_content flex_between_direction">
                  <div class="title">电压异常次数</div>
                  <CountTo3 class="countTo" color="rgba(255,153,0,0.4)" />
                </div>
              </div>
              <div class="dyyctj_item">
                <img
                  class="bottom"
                  src="@/assets/images/echarts/dianliu.png"
                  alt=""
                />
                <div class="dyyctj_item_content flex_between_direction">
                  <div class="title">电流异常次数</div>
                  <CountTo3 class="countTo" />
                </div>
              </div>
            </div>
          </div>
        </StrokeDetial> -->
        </div>
      </div>
      <div class="stroke box_r" :style="{ width: !isHome ? '21.5%' : '25.5%' }">
        <StrokeDetial
          style="height: 35%"
          title="能耗数据分析"
          :url="
            !isHome
              ? '/index/energy?title=产量统计分析详情'
              : '/special/parcel/energy'
          "
        >
          <!-- <div class="flex_center">
            <ElementSelect ref="psNameSelect" :isSelected="true" @select="selectList1" />
          </div> -->
          <div class="flex_center_direction Echarts" style="height: 92%">
            <div
              class="nhsj_item flex_between"
              v-for="(item, index) in mhsjfxData"
              :key="index"
            >
              <div class="img_box">
                <img :src="item.img" alt="" />
                <div class="title">
                  {{ item.name }}
                </div>
              </div>
              <div class="nhsj_item_right">
                <!-- <p class="">aaaa</p> -->
                <p
                  v-for="(it, ind) in item.num"
                  :key="ind"
                  class="p-number"
                  :class="[it == '.' ? 'noborder' : '', 'p-number-' + index]"
                >
                  {{ it }}
                </p>
                <div class="unit">
                  {{ item.unit }}
                </div>
              </div>
            </div>
          </div>
        </StrokeDetial>
        <StrokeDetial
          style="height: 33%"
          title="电力仪表监控分析"
          :url="!isHome ? '/index/lcd' : ''"
        >
          <div class="flex_center">
            <ElementSelect
              ref="psNameSelect"
              :isSelected="true"
              @select="selectList1"
              :isAll="false"
              :settings="{
                placeholder: '请选择',
                isSelected: true,
                isMultiple: false,
                label: 'dev',
                value: 'id',
              }"
              url="Productionline/interfaceTag/getDev"
              :isClearable="false"
            />
          </div>
          <div class="flex_center_direction Echarts dlybjk">
            <StrokeItem3
              :title="center[0].type + '（KW·h）'"
              leftWidth="47%"
              rightWidth="52%"
              :number="center[0].value || 0"
              unit=""
              style="width: 100%; margin-bottom: 0"
            />
            <StrokeItem3
              :title="center[1].type + '（KW）'"
              leftWidth="47%"
              rightWidth="52%"
              :number="center[1].value || 0"
              unit=""
              style="width: 100%; margin-bottom: 0"
            />
            <StrokeItem3
              :title="center[2].type"
              leftWidth="47%"
              rightWidth="52%"
              :number="center[2].value || 0"
              unit=""
              style="width: 100%; margin-bottom: 0"
            />
            <StrokeItem3
              :title="center[3].type + '（KW·h）'"
              leftWidth="47%"
              rightWidth="52%"
              :number="center[3].value || 0"
              unit=""
              style="width: 100%; margin-bottom: 0"
            />
          </div>
        </StrokeDetial>
        <StrokeDetial
          style="height: 33%"
          title="产线设备监控分析"
          :url="!isHome ? '/index/assemblyline' : ''"
        >
          <div class="statusBox flex_center" :data="right3">
            <StatusBox
              class="item"
              :data="{ name: '吹灌旋一体机', status: right3.YK_BBM_DG_ST_JW }"
            />

            <StatusBox
              class="item"
              :data="{ name: '码垛机', status: right3.YK_YQMD_DG_ST_TJ }"
            />
            <StatusBox
              class="item"
              :data="{ name: '水处理', status: right3.YK_WT_DG_ST_RUN }"
            />
          </div>
        </StrokeDetial>
      </div>
    </div>
    <div id="loader-wrapper" v-else>
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
      <div class="load_title">正在加载系统资源，请耐心等待</div>
    </div>
  </div>
</template>

<script>
let _this = this;
import { mapGetters, mapState } from "vuex";
import { GetVal } from "@/api/parcel/index.js"; //电力仪表监控分析
import Map from "@/components/map/index";
import CountTo3 from "@/components/chartNum/index3.vue"; //数字递增
import StatusBox from "@/components/myComponents/status/index.vue"; //状态
import Yibiaopan from "@/components/echarts/pie/yibiaopan.vue"; //仪表盘
import { list } from "@/api/dialog/index";
import { getInfo } from "@/api/login";
import StrokeItem3 from "@/components/myComponents/stroke/item3.vue";
import {
  ProductRecordCount,
  ProductPlanCount,
  ProductionProcess,
  humiture,
  energySy,
  electricDay,
  electricMonth,
  getTag,
  getEnergyDay,
  getEnergyMonth,
  GetBottleDay,
  GetBoxDay,
  getRealWsd,
  SafeP,
  KanbanLeft,
  waterMainKanBan,
  elecMainKanBan,
  complaintNKSJ,
  processTotalNKSJ,
  getinternalNKSJ,
  waterAndElectric,
} from "@/api/echarts/index";
export default {
  // name: "Index",
  components: {
    CountTo3,
    StatusBox,
    Yibiaopan,
    Map,
    StrokeItem3,
  },

  computed: {
    ...mapGetters(["topbarRouters"]),
  },
  data() {
    return {
      options: [
        {
          value: "1",
          label: "码垛机",
        },
        {
          value: "2",
          label: "吹瓶机",
        },
      ],
      value: "1",
      model: "lastMonth",
      left1: [
        {
          type: "内控",
          pp: "0.00",
          sb: "0.00",
          pg: "0.00",
          db: "0.00",
          wx: "0.00",
          qy: "0.00",
          sly: "0.00",
          dhd: "0.00",
          ksl: "0.000",
          zcl: "0.00",
          bdb: "0.00",
        },
        {
          type: "实际",
          pp: "0.00",
          sb: "0.00",
          pg: "0.00",
          db: "0.00",
          wx: "0.00",
          qy: "0.00",
          sly: "0.00",
          dhd: "0.00",
          ksl: "0.000",
          zcl: "0.00",
          bdb: "0.00",
        },
      ],
      //产量统计分析
      left2: {
        dayBotleCount: [0],
        dayBotleCountPing: [0],
        monthBoxCount: [0],
        monthWaterUseCount: [0],
      },
      //生产计划进度分析
      left3: {
        monthRate: 0,
        quarterRate: 0,
        allRate: 0,
      },
      left1Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        ggname: "",
      },
      //安全生产天数
      safeDate: [0],
      mhsjfxData: [
        // {
        //   name: "安全生产天数",
        //   img: require("@/assets/images/echarts/anquan.png"),
        //   unit: "天",
        //   num: [0],
        // },
        {
          name: "当日电能消耗",
          img: require("@/assets/images/echarts/dian.png"),
          unit: "KW·h",
          num: [0],
        },
        {
          name: "当月电能消耗",
          img: require("@/assets/images/echarts/dian.png"),
          unit: "KW·h",
          num: [0],
        },
        {
          name: "当日水能消耗",
          img: require("@/assets/images/echarts/shui3.png"),
          unit: "吨(T)",
          num: [0],
        },
        {
          name: "当月水能消耗",
          img: require("@/assets/images/echarts/shui3.png"),
          unit: "吨(T)",
          num: [0],
        },
      ],
      // 温湿度
      // arr: ["吹瓶机", "灌装机", "成品库", "材料库"],
      // arr: [
      //   { name: "吹瓶机", wd: 16.4, sd: 56.8 },
      //   { name: "灌装机", wd: 24.7, sd: 49.2 },
      //   { name: "成品库", wd: 11.2, sd: 66.4 },
      //   { name: "材料库", wd: 11.4, sd: 61.2 },
      // ],
      arr: [
        { name: "吹瓶机", wd: 0, sd: 0 },
        { name: "灌装机", wd: 0, sd: 0 },
        { name: "成品库", wd: 0, sd: 0 },
        { name: "材料库", wd: 0, sd: 0 },
      ],
      center: [
        { type: "累计电量", value: 0 },
        { type: "总有功功率", value: 0 },
        { type: "功率因数", value: 0 },
        { type: "当日电量", value: 0 },
      ],
      //电力仪表监控分析
      right3: {
        YK_BBM_IN_ST_RUN: 0, //吹罐装
        YK_YQMD_DG_ST_TJ: 0, //码垛机
        YK_WT_DG_ST_RUN: 0, //水处理
      }, //产线设备监控分析
      centerId: null,
      /* 是否有看板 */
      isEcharts: true,
      //定时器
      timer: null,
      //定时器2
      timer2: null,
      menus: [],
      menusIndex: 0,
      //地图弹窗是否显示
      isMap: false,
      //地图是否显示
      isMapCom: false,
      //地图信息
      mapInfo: {
        title: "",
        address: "",
        peopleNum: "",
        scale: "",
        fundNum: "",
        leader: "",
        phone: "",
        pic: "",
      },
      //是否是主页
      isHome: false,
    };
  },

  created() {
    this.echartsFun("1");
    if (this.$route.path != "/special/parcel/indexs") {
      this.isHome = false;
    } else {
      this.isHome = true;
    }
  },
  beforeDestroy() {
    console.log('咯开了')
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.timer2) {
      clearInterval(this.timer2);
    }
  },
  methods: {
    /* 判断是否有看板 */
    echartsFun(val) {
      let temp = 0;
      for (let item of this.topbarRouters) {
        if (item.path == "/index") {
          temp++;
        }
      }
      if (temp > 0) {
        //首页-产量统计
        this.productRecordCount();
        this.productPlanCount();
        this.productionProcess();
        this.humiture(); // 温湿度统计分析
        this.getList(); //获取设备列表
        this.getTag(); //产线设备监控分析
        this.energySys(); // 能耗
        this.energySys2();
        this.getBottleDay();
        this.getBoxDay();
        this.getRealWsd();
        //获取七率统计列表
        this.getSevenList();
        if (val == "1") {
          // if (this.timer2) {
          clearInterval(this.timer2);
          // }
          this.timer2 = setInterval(() => {
            this.getBottleDay();
            this.energySys2();
            this.getBoxDay();
            this.energySys();
            this.getRealWsd();
          }, 10000);
        }
        this.isEcharts = true;
      } else {
        this.isEcharts = false;
      }
    },

    // 温湿度统计分析
    humiture() {
      // 吹瓶机灌装机接口
      // humiture().then((res) => {
      //   if (res.code == 200) {
      //     this.hum = res.data;
      //   }
      // });
    },
    energySys2() {
      // 当日水能消耗
      var myDate = new Date();
      getEnergyDay({
        startTime: this.parseTime(myDate, "{y}-{m}-{d}") + " 00:00:00",
        stopTime: this.parseTime(myDate, "{y}-{m}-{d} {h}:{i}:{s}"),
      }).then((res) => {
        if (res.code == 200) {
          this.mhsjfxData[2].num = res.data.dayWater
            .toFixed(2)
            .toString()
            .split("");
        }
      });

      // 当月水能消耗
      getEnergyMonth({
        startTime: this.$getMonth("s") + " 00:00:00",
        stopTime: this.$getMonth("e") + " 23:59:58",
      }).then((res) => {
        if (res.code == 200) {
          this.mhsjfxData[3].num = res.data.monthWater
            .toFixed(2)
            .toString()
            .split("");
        }
      });
    },
    // 能耗数据分析
    energySys() {
      //当日电能消耗
      electricDay().then((response) => {
        let temp = Number(response.data).toFixed(2);

        this.mhsjfxData[0].num = temp;
      });
      //当月电能消耗
      electricMonth().then((response) => {
        let temp = Number(response.data).toFixed(2);
        this.mhsjfxData[1].num = temp.toString().split("");
      });

      SafeP(101).then((res) => {
        if (res.code == 200) {
          this.safeDate = res.data.toString().split("");
        } else {
          this.safeDate = ["0"];
        }
      });
    },
    //获取设备列表
    getList() {
      list(
        "Productionline/interfaceTag/getDev?total=0&pageNum=1&pageSize=300",
        "GET"
      ).then((res) => {
        this.centerId = res.rows[0].id;
        this.$refs.psNameSelect.value = res.rows[0].dev;
        this.getVal();
        this.menus = res.rows;
        this.menusIndex = 0;
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.timer = setInterval(() => {
          if (this.menusIndex < this.menus.length - 1) {
            this.menusIndex++;
          } else {
            this.menusIndex = 0;
          }
          this.$refs.psNameSelect.value = this.menus[this.menusIndex].dev;
          this.centerId = this.menus[this.menusIndex].id;
          this.getVal();
        }, 10000);
      });
    },
    //电力仪表监控分析
    getVal() {
      GetVal(this.centerId).then((res) => {
        if (res.length != 0) {
          this.center = res;
        } else {
          this.center = [
            { type: "累计电量", value: 0 },
            { type: "总有功功率", value: 0 },
            { type: "功率因数", value: 0 },
            { type: "当日电量", value: 0 },
          ];
        }
      });
    },
    //选择器改变
    selectList1(e) {
      this.centerId = e;
      -this.getVal();
      if (this.timer) {
        clearInterval(this.timer);
      }
      for (let i = 0; i < this.menus.length; i++) {
        if (this.centerId == this.menus[i].id) {
          this.menusIndex = i;
        }
      }
      this.timer = setInterval(() => {
        if (this.menusIndex < this.menus.length - 1) {
          this.menusIndex++;
        } else {
          this.menusIndex = 0;
        }
        this.$refs.psNameSelect.value = this.menus[this.menusIndex].dev;
        this.centerId = this.menus[this.menusIndex].id;
        this.getVal();
      }, 10000);
    },
    radioChange(e) {
      this.left1Form.ksrq = e[0];
      this.left1Form.jsrq = e[1];
      this.productionProcess();
    },
    //获取七率统计列表
    getSevenList() {
      list(
        "/system/dict/data/sevenList",
        { pageNum: 1, pageSize: 320, dictType: "product_report_type" },
        "GET"
      ).then((res) => {
        this.left1Form.ggname = res.rows[0].dictValue;
        waterAndElectric(this.left1Form).then((res) => {
          this.left1[0].sly = Number(res.data.water_nk).toFixed(2);
          this.left1[1].sly = Number(res.data.water_sj).toFixed(2);
          this.left1[0].dhd = Number(res.data.elec_nk).toFixed(2);
          this.left1[1].dhd = Number(res.data.elec_sj).toFixed(2);
        });
      });
    },
    //七率统计分析
    selectList2(e) {
      this.left1Form.ggname = e;
      waterAndElectric(this.left1Form).then((res) => {
        this.left1[0].sly = Number(res.data.water_nk).toFixed(2);
        this.left1[1].sly = Number(res.data.water_sj).toFixed(2);
        this.left1[0].dhd = Number(res.data.elec_nk).toFixed(2);
        this.left1[1].dhd = Number(res.data.elec_sj).toFixed(2);
      });
    },
    //首页-七率统计分析
    productionProcess() {
      ProductionProcess(this.left1Form).then((res) => {
        if (res.code == 200) {
          for (let index in res.data) {
            this.left1[index].pp = Number(res.data[index].pp).toFixed(2);
            this.left1[index].pg = Number(res.data[index].pg).toFixed(2);
            this.left1[index].sb = Number(res.data[index].sb).toFixed(2);
          }
        }
      });

      //人均产出、单板产出、维修费用
      KanbanLeft(this.left1Form).then((res) => {
        if (res.code == 200) {
          this.left1[1].db = Number(res.data.db1).toFixed(2);
          this.left1[0].db = Number(res.data.dbNk).toFixed(2);
          this.left1[1].wx = Number(res.data.sj1).toFixed(2);
          this.left1[0].wx = Number(res.data.wxfyNk).toFixed(2);
          this.left1[1].qy = Number(res.data.qy1).toFixed(2);
          this.left1[0].qy = Number(res.data.sumNk).toFixed(2);
        }
      });
      // //水利用率
      // waterMainKanBan(this.left1Form).then((res) => {
      //   if (res.code == 200) {
      //     this.left1[1].sly = Number(res.data.SJ).toFixed(2);
      //     this.left1[0].sly = Number(res.data.NK).toFixed(2);
      //   }
      // });
      // //吨耗电
      // elecMainKanBan(this.left1Form).then((res) => {
      //   if (res.code == 200) {
      //     this.left1[1].dhd = Number(res.data.SJ).toFixed(2);
      //     this.left1[0].dhd = Number(res.data.NK).toFixed(2);
      //   }
      // });
      //客诉率
      complaintNKSJ({
        dnStart: this.left1Form.ksrq,
        dnEnd: this.left1Form.jsrq,
      }).then((res) => {
        if (res.code == 200) {
          this.left1[1].ksl = Number(res.data.SJ).toFixed(3);
          this.left1[0].ksl = Number(res.data.NK).toFixed(3);
        }
      });
      //制成率
      processTotalNKSJ({
        dnStart: this.left1Form.ksrq,
        dnEnd: this.left1Form.jsrq,
      }).then((res) => {
        if (res.code == 200) {
          // console.log(res);
          this.left1[1].zcl = Number(res.data.SJ).toFixed(2);
          this.left1[0].zcl = Number(res.data.NK).toFixed(2);
        }
      });
      //不达标
      getinternalNKSJ(this.left1Form).then((res) => {
        if (res.code == 200) {
          this.left1[1].bdb = Number(res.data.SJ).toFixed(2);
          this.left1[0].bdb = Number(res.data.NK).toFixed(2);
        }
      });
      waterAndElectric(this.left1Form).then((res) => {
        this.left1[0].sly = Number(res.data.water_nk).toFixed(2);
        this.left1[1].sly = Number(res.data.water_sj).toFixed(2);
        this.left1[0].dhd = Number(res.data.elec_nk).toFixed(2);
        this.left1[1].dhd = Number(res.data.elec_sj).toFixed(2);
      });
    },
    //首页-产量统计
    productRecordCount() {
      ProductRecordCount().then((res) => {
        if (res.code == 200) {
          this.left2.monthBoxCount = res.data.data.monthBoxCount
            .toString()
            .split("");
          this.left2.monthWaterUseCount = res.data.data.monthWaterUseCount
            .toString()
            .split("");
        }
      });
    },
    //首页-产量统计-当日产量箱
    getBoxDay() {
      GetBoxDay().then((res) => {
        if (res.code == 200) {
          this.left2.dayBotleCountPing = res.data.bottle.toString().split("");
          //  this.left2.dayBotleCount = (res.data.bottle*24+5000).toString().split("");
          //  this.left2.dayBotleCountPing = res.data.bottle.toString().split("");
          // let number = parseInt(res.data.bottle / 24)
          // .toString()
          // .split("");
          // console.log(number)
          // this.left2.dayBotleCountPing = number;
        }
      });
    },
    //首页-产量统计-当日产量
    getBottleDay() {
      GetBottleDay().then((res) => {
        if (res.code == 200) {
          this.left2.dayBotleCount = res.data.bottle.toString().split("");
          //  this.left2.dayBotleCountPing = res.data.bottle.toString().split("");
          // let number = parseInt(res.data.bottle / 24)
          //   .toString()
          //   .split("");
          // console.log(number)
          // this.left2.dayBotleCountPing = number;
        }
      });
    },
    //首页-生产计划进度分析-
    productPlanCount() {
      ProductPlanCount()
        .then((res) => {
          this.left3 = res.data;
          if (res.code == 200) {
            this.left3.monthRate = Number(
              res.data.monthRate.replace("%", "")
            ).toFixed(0);
            this.left3.quarterRate = Number(
              res.data.quarterRate.replace("%", "")
            ).toFixed(0);
            this.left3.allRate = Number(
              res.data.allRate.replace("%", "")
            ).toFixed(0);
          }
        })
        .catch((err) => {});
    },
    //首页-产线设备监控分析
    getTag() {
      getTag().then((res) => {
        this.right3 = res;
      });
    },
    //首页-温湿度监控
    getRealWsd() {
      getRealWsd().then((res) => {
        this.arr = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.myMain {
  align-items: flex-end;
  display: flex;
  width: 100%;
  .box_l,
  .box_c,
  .box_r {
    width: 21.5%;
    height: 98.9%;
    position: relative;
    top: -1%;
    overflow: hidden;
    overflow-x: hidden;
    .Echarts {
      width: 100%;
      height: calc(100% - 52px);
      // margin-top: 1vh;
      //  background: red;
      .item {
        width: 33%;
        float: left;
      }
    }
    .scjhjd_box {
      width: 100%;
      height: 100%;
      .yibiaopan {
        width: 230px;
        height: 116px;
        border-radius: 120px 120px 0 0;
        transform: scale(0.9);
        -webkit-transform: scale(0.9); /*兼容-webkit-引擎浏览器*/
        -moz-transform: scale(0.9); /*兼容-moz-引擎浏览器*/
        // overflow: hidden;
        position: relative;
        top: -5px;
        .yibiaopan_bg {
          height: 80px;
          background: rgba(255, 206, 0);
          position: absolute;
          left: 40px;
          bottom: 4px;
        }
        img {
          width: 234px;
          height: 116px;
          position: relative;
          left: -2px;
          top: -2px;
          z-index: 1;
        }
        .yibiaopan_nummber {
          width: 100%;
          text-align: center;
          position: absolute;
          bottom: 0;
          z-index: 2;
          font-size: 28px;
        }
        .type {
          width: 100%;
          text-align: center;
          font-size: 13px;
          color: #00ffd3;
          margin-top: -5px;
          transform: scale(0.9);
        }
      }
      .water_box {
        width: 70%;
        padding: 0 20px;
        // background: red;
        height: 80px;
        margin-top: 12px;
        .water_box_item {
          position: relative;
          .water_box_item_bg {
            width: 80px;
            height: 80px;
            background-size: 100% 100%;
            background-image: url("~@/assets/images/echarts/shuibj1.png");
            // background: red;
          }
          .water_box_item_bg2 {
            background-image: url("~@/assets/images/echarts/shuibj2.png");
          }
          .water_box_item_bg3 {
            background-image: url("~@/assets/images/echarts/shuibj3.png");
          }
          .type {
            width: 100%;
            text-align: center;
            font-size: 11px;
            color: #00ffd3;
            margin-top: 5px;
            transform: scale(0.9);
          }
        }
      }
      @media screen and (max-width: 961px) {
        .water_box {
          height: 70px;
          // width: 100%;
          padding: 5px;
        }
        .water_box_item {
          top: 2px;
          // margin-left: 5px;
          .water_box_item_bg {
            width: 80px !important;
            height: 80px !important;
          }
        }
      }
    }
    .dlybjk {
      width: 100%;
      padding: 0 30px;
      display: flex;
      justify-content: space-between;
      .dlybjk_bottom {
        width: 150px;
        height: 24px;
        font-size: 12px;
        color: #d4f0ff;
        text-align: center;
        line-height: 24px;
        margin: 15px auto;
        background-size: 100% 100%;
        background-image: url("~@/assets/images/echarts/zsx.png");
      }
      .zyg {
        width: 150px;
        height: 180px;
        .zyg_top {
          width: 150px;
          height: 150px;
          color: #ffffff;
          text-align: center;
          line-height: 150px;
          font-size: 22px;
          background-size: 100% 100%;
          background-image: url("~@/assets/images/echarts/zyg.png");
        }
      }
      .zwg {
        width: 150px;
        height: 180px;
        // margin: 0px 12%;
        .zwg_top {
          width: 150px;
          height: 150px;
          color: #ffffff;
          text-align: center;
          line-height: 150px;
          font-size: 22px;
          background-size: 100% 100%;
          background-image: url("~@/assets/images/echarts/zwg.png");
        }
      }
      .pl {
        width: 150px;
        height: 180px;
        .pl_top {
          width: 150px;
          height: 150px;
          color: #ffffff;
          text-align: center;
          line-height: 150px;
          font-size: 22px;
          background-size: 100% 100%;
          background-image: url("~@/assets/images/echarts/zyg.png");
        }
      }
    }
    @media screen and (max-width: 961px) {
      .dlybjk {
        .dlybjk_bottom {
          width: 79px;
          height: 20px;
          line-height: 22px;
        }
        .zyg {
          width: 110px;
          height: 135px;
          .zyg_top {
            width: 110px;
            height: 110px;
            line-height: 110px;
          }
        }
        .zwg {
          width: 110px;
          height: 135px;
          margin: 0px 12%;
          .zwg_top {
            width: 110px;
            height: 110px;
            line-height: 110px;
          }
        }
        .pl {
          width: 110px;
          height: 135px;
          .pl_top {
            width: 110px;
            height: 110px;
            line-height: 110px;
          }
        }
      }
    }
    .table {
      .table_cell {
        img {
          width: 10px;
          margin-top: -10px;
        }
      }
    }
    .cnfx_box {
      width: 85%;
      height: 24%;
      background: url("~@/assets/images/echarts/chanbig.png");
      background-size: 100% 100%;
      justify-content: flex-start;
      margin-bottom: 1%;
      img {
        width: 60px;
        margin: 0 0 3px 6px;
      }
      .content {
        height: 100%;
        align-items: flex-start;
        margin-top: 23px;
        .title {
          font-size: 12px;
          color: #ffffff;
          margin-bottom: 4px;
          margin-left: 5px;
        }
        .number {
          font-family: SimHei, SimHei-Regular;
          font-weight: 400;
          font-size: 13px;
          height: 45px;
          display: flex;
          align-items: flex-end;
          margin-top: 5px;
          .p-number {
            width: 25px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            /* 背景图片 */
            background: url("~@/assets/images/echarts/numbj.png");
            background-size: 100% 100%;
            list-style: none;
            margin-right: 2px;
            border-radius: 4px;
            font-size: 24px;
          }
          .noborder {
            background: none;
            font-size: 14px;
            position: relative;
            width: auto;
            top: -5px;
          }
        }
      }
    }
    @media screen and (max-width: 961px) {
      .cnfx_box {
        width: 94%;
        height: 30%;
        margin-bottom: 1.5%;
        .content {
          margin-top: 25px;
          .number {
            margin-top: 0px;
          }
          .noborder {
            font-size: 12px !important;
          }
        }
        img {
          width: 60px;
          margin: 0 8px;
        }
      }
    }
    .wsd_box {
      width: 100%;
      height: 100%;
      padding: 5% 0;
      flex-wrap: wrap;
      .item {
        width: 170px;
        height: 75px;
        background: url("~@/assets/images/echarts/wsd.png");
        background-size: 100% 100%;
        padding: 0 6px 0 19px;
        .wsd_item_left {
          font-size: 12px;
          color: #ffffff;
        }
        .wsd_item_right {
          height: 100%;
          width: 45%;
          padding: 8px 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .wsd_item_right_item {
            height: 43%;
            justify-content: flex-end;
            .number {
              font-size: 14px;
              color: #3bffe6;
              margin-top: -3px;
            }
            .title {
              font-size: 12px;
              color: #d4f0ff;
            }
          }
        }
      }
      .item:nth-child(even) {
        margin-left: 20px;
      }
      // .content {
      //   width: 350px;
      //   height: 240px;
      //   padding: 5px 0 5px 0;
      //   background: url("~@/assets/images/echarts/wendu.png");
      //   background-size: 100% 100%;
      //   .wsd_item {
      //     width: 100%;
      //     height: 50%;
      //     padding: 0 0px 0 63px;
      //     .wsd_item_left {
      //       font-size: 15px;
      //       color: #ffffff;
      //     }
      //     .wsd_item_right {
      //       height: 100%;
      //       width: 25%;
      //       padding: 8px 0 0 0;
      //       align-items: center;
      //       display: flex;
      //       flex-direction: column;
      //       justify-content: space-between;
      //       .wsd_item_right_item {
      //         height: 43%;
      //         display: flex;
      //         flex-direction: column;
      //         // justify-content: center;
      //         align-items: center;
      //         .number {
      //           font-size: 18px;
      //           color: #ffffff;
      //         }
      //         .title {
      //           font-size: 12px;
      //           color: #d4f0ff;
      //         }
      //       }
      //     }
      //   }
      // }
      @media screen and (max-width: 961px) {
        .content {
          width: 300px;
          height: 210px;
        }
      }
    }
    .nhsj_item {
      width: 100%;
      height: 22%;
      padding: 0 0 0 4%;
      margin-bottom: 0.5%;
      align-items: flex-end;
      justify-content: flex-start;
      .img_box {
        width: 38%;
        height: 30px;
        background: url("~@/assets/images/echarts/tabl@2x.png");
        display: flex;
        align-items: flex-end;
        background-size: 100% 100%;
        img {
          width: 40px;
          position: relative;
          top: 8px;
          opacity: 0.8;
        }
        .title {
          font-size: 12px;
          line-height: 28px;
          position: relative;
          top: 3px;
          color: #ffffff;
        }
      }
      .nhsj_item_right {
        display: flex;
        position: relative;
        top: 24px;
        align-items: center;
        .p-number {
          width: 20px;
          height: 36px;
          text-align: center;
          line-height: 36px;
          /* 背景图片 */
          background: url("~@/assets/images/echarts/numbj2.png");
          background-size: 135% 125%;
          background-position: center;
          list-style: none;
          margin-right: 3px;
          border-radius: 4px;
          color: #ffffff;
          font-size: 24px;
        }
        .noborder {
          background: none;
          font-size: 14px;
          position: relative;
          width: auto;
          top: 10px;
          font-size: 20px;
        }
        .unit {
          font-size: 12px;
          color: #00ffd3;
          position: relative;
          top: 12px;
          left: 4px;
        }
      }
    }
    @media screen and (max-width: 961px) {
      .nhsj_item {
        padding: 0;
        margin-top: 1%;
        height: 31%;
        .img_box {
          width: 45%;
          .title {
            font-size: 12px;
            top: 0px;
            left: -5px;
          }
        }
        .nhsj_item_right {
          .p-number {
            width: 20px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            margin-right: 3px;
          }
          .noborder {
            font-size: 30px;
          }
        }
      }
    }
    .dyyctj_box {
      width: 100%;
      height: 100%;
      .dyyctj_content {
        margin-top: 10px;
        width: 342px;
        height: 220px;
        background: url("~@/assets/images/echarts/tuxing.png");
        background-size: 100% 100%;
        position: relative;
        .center_img {
          position: absolute;
          width: 80px;
          height: 80px;
          left: 50%;
          top: 50%;
          margin-left: -40px;
          margin-top: -40px;
        }
        .dyyctj_item {
          width: 49%;
          height: 48%;
          position: relative;
          z-index: 2;
          float: left;
          img {
            width: 26px;
            height: 26px;
            position: absolute;
            left: 14px;
            top: 14px;
          }
          .bottom {
            top: 60px;
          }
          .dyyctj_item_content {
            width: 60%;
            height: 70%;
            margin: 14px 0 0 42px;
            .title {
              font-size: 14px;
              color: #ffffff;
            }
          }
        }
        .dyyctj_item_odd {
          margin: 0 2% 2% 0;
        }
      }
      @media screen and (max-width: 1200px) {
        .dyyctj_content {
          margin-top: 10px;
          width: 400px;
          height: 257px;
        }
      }
    }
    .statusBox {
      width: 100%;
      height: 100%;
      padding: 0.5vh 0 0.5vh;
      display: flex;
      overflow: hidden;
      .item {
        margin-top: 6%;
        flex-shrink: 0;
        width: 30%;
      }
    }
    @media screen and (max-width: 961px) {
      .statusBox {
        .item {
          margin-left: 10px;
        }
      }
    }
  }
  .box_c {
    width: 55.5%;
    height: 98.9%;
    margin: 0 0.6vw;
    position: relative;
    .day-box {
      width: 500px;
      height: 54px;
      position: absolute;
      top: 5px;
      z-index: 1000;
      background: url("../../assets/images/echarts/day.png");
      background-size: 100% 100%;
      left: 50%;
      margin-left: -250px;
      span {
        font-family: Source Han Sans CN, Source Han Sans CN-Medium;
        font-weight: 500;
        text-align: left;
        color: #00ffd3 !important;
        font-size: 22px;
      }
      .number-box {
        margin: 0 10px 0 25px;
        p {
          float: left;
          background: url("../../assets/images/echarts/day-bj.png");
          background-size: 100% 100%;
          width: 22px;
          height: 38px;
          margin-left: 5px;
          text-align: center;
          line-height: 42px;
          font-size: 25px;
          position: relative;
          top: -3px;
          color: #ffffff;
        }
      }
    }
    .mapShow {
      width: 53px;
      height: 22px;
      opacity: 1;
      background: #1cbf24;
      border: 1px solid rgba(0, 156, 255, 0.52);
      color: #d4f0ff;
      font-size: 12px;
      border-radius: 14px;
      text-align: center;
      line-height: 21px;
      position: absolute;
      cursor: pointer;
      z-index: 10000;
      right: 10px;
      top: 10px;
      cursor: pointer;
      i {
        font-size: 30px;
      }
    }
    .mapInfo {
      width: 300px;
      min-height: 300px;
      background: url("../../assets/images/map.png");
      background-size: 100% 100%;
      position: absolute;
      right: 10px;
      z-index: 10000;
      bottom: 10px;
      .top {
        width: 100%;
        height: 40px;
        padding: 8px 15px;
        position: relative;
        nav {
          font-size: 16px;
          color: #ffffff;
        }
        .border {
          width: 100%;
          position: relative;
          top: -5px;
        }
        .close {
          position: absolute;
          right: 15px;
          font-size: 16px;
          top: 11px;
          opacity: 0.8;
          cursor: pointer;
          color: #ffffff;
        }
      }
      .content {
        //  width: 100%;
        height: 250px;
        overflow: auto;
        // background: red;
        padding: 0px 15px;
        // position: relative;
        .label {
          padding: 2px 3px;
          background: none;
          border: 1px solid rgba(255, 255, 255, 95);
          border-radius: 10px;
          text-align: center;
          // line-height: 0;
          font-size: 12px;
          color: rgba(255, 255, 255, 95);
          position: relative;
          top: -5px;
          flex-direction: column;
        }
        .value {
          font-size: 12px;
          color: #01f0ff;
          position: relative;
          top: -10px;
        }
        .imgInfo {
          width: 260px;
        }
      }
    }
  }
  .box_l {
    .cont_box {
      width: 80%;
      margin-left: 10%;
      height: 80px;
      // margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 10;
      span {
        font-size: 20px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        color: #feffff;
        margin-right: 25px;
        position: relative;
        z-index: 10;
      }
      .btm {
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 1;
      }
      .percentage_box {
        height: 32px;
        font-size: 32px !important;
        position: relative;
        z-index: 10;
        color: #ff4a4a;
        display: flex;
        align-items: flex-start;
        .jiang {
          width: 20px;
        }
      }
    }
  }
  .box_r {
    .sel_box {
      display: flex;
      button {
        height: 28px;
        font-size: 14px;
        font-family: Adobe Heiti Std, Adobe Heiti Std-R;
        text-align: left;
        line-height: 10px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #1579bb;
        border: none;
        margin-right: 5px;
        padding-right: 7px;
        border: 1px solid #1579bb;
        color: #d4f0ff;
        cursor: pointer;
        img {
          width: 12px;
          height: 14px;
          margin-right: 5px;
        }
      }
      .button_active {
        background: #2a9dbb;
        color: #ffffff;
        border: 1px solid #00ffff;
      }
    }
  }
}
</style>
<style lang="scss">
.table {
  // transform: scale(0.91);
}
@media screen and (max-width: 961px) {
  .table {
    transform: scale(0.8);
    width: 120% !important;
    margin-left: -10%;
  }
}
</style>
